<template>
	<view>
		<u-navbar class="u_navbar" height="88" title-color="#333" back-icon-color="#333333" :is-fixed="top.isFixed"
		:custom-back="caback"
			:is-back="true" :background="top.background" :title="top.title" title-size="top.titlesize" :back-icon-name="top.backIconName"
			:back-text="top.backText">
			<view class="navbar-cnter" slot="" v-if="top.center"  @click="ishw">
				<text class="cnter-lefts" v-if="top.isselect">联盟信息</text> 
				<text class="cnter-left" v-else>抖音账号授权</text>
				<u-icon name="arrow-down"  size="28"></u-icon>
			</view>
			<view class="navbar-right" slot="right" v-if="top.slotRight">
				<view class="addmes" v-if="top.istext" >
					<text @click="addmes">保存</text>
				</view>
				<view style="margin:5px 12px 0 0 " v-else>
				<view class="" v-if="top.isicon" @click="Sheet">
					<u-icon class="icons" :name="top.icon" color="#333333"
					size="40" style="margin-left: 30rpx;" >
					</u-icon>
					<image src="../../static/video/qianb.png" mode="" class="qianb" style="width: 50rpx; height: 40rpx;"></image>
				</view>
					<u-icon class="icons" name="more-dot-fill" color="#333333" size="40" style="margin-left: 30rpx;" v-else>
					</u-icon>
				</view>
			</view>
		</u-navbar>
		<u-mask :show="show" @click="show = false" z-index="9">
			<view class="warps" v-if="top.isselect">
				<view class="listing"  v-for="(item,index) in datas" :key="index" @click="addcity(item)">
					<text>{{item.name}}</text>
				</view>
			</view>
				<view class="warp"  v-else >
					<view class="rect">
						<view class="pic-list">
							<view class="list-dy">
								<image src="../../static/img/dy.png" mode=""></image><text>抖音</text>
							</view>
							<view class="list-ks">
								<image src="../../static/img/ks.png" mode=""></image><text>快手</text>
							</view>
						</view>
					</view>
				</view>
		</u-mask>
		
	</view>
</template>

<script>
	import {unionCity} from "@/api/league/leaguehome.js"
	export default {
		props:{top:Object},
		data() {
			return {
				show:false,
				isshow:true,
				titel:"抖音账号授权",
				list:[
					{pic:require('../../static/img/dy.png'),name:"抖音"},
					{pic:require('../../static/img/ks.png'),name:"快手"}
				],
				datas:[
					{
					      "city": 2,
					      "name": "天津市"
					    },
					    {
					      "city": 3,
					      "name": "石家庄市"
					    },
					    {
					      "city": 6,
					      "name": "邯郸市"
					    },
					    {
					      "city": 10,
					      "name": "承德市"
					    },
					    {
					      "city": 15,
					      "name": "太原市"
					    },
				]

			}
		},
		onLoad() {

		},
		methods: {
			// 打开下拉菜单
			Sheet(){
				this.$emit("rabit",{name:"click"})
			},
			caback(){
				if(this.top.drristo){
					uni.reLaunch({
					    url: '/pages/merchant/cut'
					});
				}else{
					uni.navigateBack({
					    delta: 1
					});
				}
			},
			ishw(){
				this.show=!this.show
				let trys=this.top.isselect
				console.log(trys)
				 if(trys){
					unionCity().then(res=>{
						console.log(res)
						if(res.code==0){
							this.datas=res.data
						}
					}) 
				 }
			},
			//保存信息
			addmes(){
				this.$emit("addmessage",{name:"保存"})
			},
			addcity(el){
				let obj={...el}
				this.$emit("addcitys",obj)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.u_navbar{
		position: relative;
		z-index: 999999999;
	}
	.navbar-cnter{
		margin-left: 200rpx;
		display: flex;
		align-items: center;
		.cnter-left{
			margin-right: 10rpx;
		}
		.cnter-lefts{
			margin-right: 20rpx;
		}
	}
	.details{
		display: flex;
		justify-content: space-around;
		image{
			width: 30rpx;
			height: 30rpx;
		}
	}
	.pic-list{
		display: flex;
		justify-content: space-around;
		padding: 30rpx;
		margin-top: 150rpx;
		background: #FFFFFF;
		border-top: 1rpx solid #F5F5F5;
		.list-dy{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 339rpx;
			height: 72rpx;
			background-color:#E7F1FF ;
			image{
				width:30rpx ;
				height: 30rpx;
				border-radius: 50%;
				margin-right:12rpx;
			}
		}
		.list-ks{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 300rpx;
			height: 72rpx;
			background: #F5F5F5;
			image{
				width:30rpx ;
				height: 30rpx;
				border-radius: 50%;
				margin-right:12rpx;
			}
		}
	}
	.addmes{
		margin-right: 30rpx;
		font-size: 34rpx;
		color:#2979FF ;
	}
	.warps{
		display: flex;
		flex-wrap: wrap;
		margin-top: 130rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		.listing{
		padding: 15rpx;
		margin: 10rpx;
		background-color: #F5F5F5;
		}
	}
</style>
